<template>
    <div class="container">
        <p class="title">年龄比例</p>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts" name="LeftBottom">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const charts = ref()
onMounted(() => {
    const myCharts = echarts.init(charts.value)
    myCharts.setOption({
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', right: 50, top: 30, textStyle: { fontSize: 14 } },
        series: [
            {
                type: 'pie',
                left: -150,
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
                label: { show: true, position: 'inside', },
                data: [
                    { value: 800, name: '小于18岁' },
                    { value: 1500, name: '18~25岁' },
                    { value: 1800, name: '25~35岁' },
                    { value: 1300, name: '35~60岁' },
                    { value: 600, name: '60岁以上' }
                ]
            }
        ],
        grid: { left: 0, right: 0, bottom: 0, top: 0 }
    })
})
</script>

<style scoped lang="scss">
.container {
    .title {
        font-size: 20px;
        margin-left: 20px;
    }

    .charts {
        margin-top: 10px;
        height: 250px;
    }
}
</style>